import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm,DatePicker, Select,TreeSelect, Menu,Dropdown, Icon, } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;
const RangePicker = DatePicker.RangePicker;

import AddShelfDownModal from '../../components/shelf/down/AddShelfDownModal';
import ShelfDownViewModal from '../../components/shelf/down/ShelfDownViewModal';
import ShowShelfDownDetailModal from '../../components/shelf/down/ShowShelfDownDetailModal';
import SecondShelfDownModal from '../../components/shelf/down/SecondShelfDownModal';

function ShelfDown ({ dispatch, shelfDown, loading, form }) {

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
    const { currentItem, modalVisible, assetList,modalType,assetCurrent,assetCurrentSize,assetTotal,
        secondModalVisible } = shelfDown


    const columns = [{
        title: '申请单号',
        dataIndex: 'id_',
        key: 'id_',
        width: 120,
    },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 100,
    },{
        title: '设备型号',
        dataIndex: 'modelNames',
        key: 'modelNames',
        width: 100,
    },{
        title: '所在机柜',
        dataIndex: 'rackNames',
        key: 'rackNames',
        width: 80,
    },{
        title: '预计执行时间',
        dataIndex: 'executeTime',
        key: 'executeTime',
        width: 100,
    },{
        title: '指定操作人',
        dataIndex: 'userName',
        key: 'userName',
        width: 80,
    },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 60,
        render: (value, row, index) => {
            return (
                value==1?"未完成":value==2?"处理中":value==3?"已完成":''
            )
        }
    },{
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 120,
    },{
        title: '操作',
        key: 'operation',
        width: 100,
        render: (text, record) => (
            <span>
            {(record.status==1)?(
              <span>
                   <Dropdown overlay={
                    <Menu>
                        <Menu.Item>
                          <a onClick={doPutOff.bind(null, record.id_)}>确认下架</a>
                        </Menu.Item>
                        <Menu.Item>
                            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
                            <a>删除</a>
                            </Popconfirm>
                        </Menu.Item>         
                    </Menu>
                    }>
                <a className="ant-dropdown-link">
                    操作<Icon type="down" />
                </a>
                </Dropdown>
                <span className="ant-divider" />
                <a onClick={onViewItem.bind(null, record.id_)}>查看</a>
              </span>
            ):<a onClick={onViewItem.bind(null, record.id_)}>查看</a>}
            </span>
        ),
    }];

    const pagination = {
        current:shelfDown.current,
        pageSize:shelfDown.currentSize,
        total: shelfDown.total,
        showSizeChanger: true,
        showTotal: (total => '共' + shelfDown.total + '条'),
        onShowSizeChange(current, size) {
            dispatch({
                type: 'shelfDown/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
            });
        },
        onChange(current) {
            dispatch({
                type: 'shelfDown/queryList',
                payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':shelfDown.currentSize} },
            });
        },
    };

    function deleteHandler(id) {
        dispatch({
        type: 'shelfDown/remove',
        payload: {id:id,search:{...getFieldsValue()}},
        });
    }
   
    const submitHandle = () => {
        dispatch({
            type: 'shelfDown/queryList',
            payload: { ...getFieldsValue() },
        });
    }

    function handleClear(){
      form.resetFields();
    }

    const addHandler = () => {
        dispatch({
        type: 'shelfDown/qryById',
            payload: {
                modalType: 'create',
            },
        })
    }
    //确认下架
    const doPutOff = (id) => {
        dispatch({
            type: 'shelfDown/showPutOffDetail',
            payload:id,
        })
    }

    const onViewItem = (id) => {
        dispatch({
            type: 'shelfDown/onViewItem',
            payload:id,
        })
    }

    const modalProps = {
        item: shelfDown.currentItem,
        visible: modalVisible,
        type: modalType,
        maskClosable: false,
        assetList:assetList,
        id:shelfDown.pullOffId,
        userList:shelfDown.userList,
        assetType:shelfDown.assetTypeTree,
        detailList:shelfDown.detailList,
        roomList:shelfDown.roomList,
        assetBrandList:shelfDown.assetBrandList,
        confirmLoading: loading,
        title: '新增下架单',
        dispatch:dispatch,
        wrapClassName: 'vertical-center-modal',
        newKey : shelfDown.newKey,
        onOk (data) {
            dispatch({
                type: `shelfDown/addPullOff`,
                payload: data,
            })
        },
        onCancel () {
            dispatch({
                type: 'shelfDown/hideModal',
            })
        },
        onCreateDetail (data) {
            dispatch({
                type: 'shelfDown/showCreateDetailModal',
                payload: data,
            })
        },
    }

    const secondShelfDownModalProps = {
        item:shelfDown.assetItem,
        visible: secondModalVisible,
        assetList:assetList,
        detailList:shelfDown.detailList,
        assetType:shelfDown.assetTypeTree,
        roomList:shelfDown.roomList,
        assetBrandList:shelfDown.assetBrandList,
        assetModelList:shelfDown.assetModelList,
        assetCurrent:assetCurrent,
        assetCurrentSize:assetCurrentSize,
        assetTotal:assetTotal,
        maskClosable: false,
        dispatch: dispatch,
        confirmLoading: loading,
        title: '新增明细',
        wrapClassName: 'vertical-center-modal',
        onCancel () {
            dispatch({
                type: 'shelfDown/hideSecondModal',
                payload: { assetList:[],assetCurrent:1,assetTotal:0}
            })
        },
    }

   const viewModalProps = {
        item: shelfDown.viewItem,
        visible: shelfDown.viewModalVisible,
        maskClosable: false,
        viewDetailList:shelfDown.viewDetailList,
        confirmLoading: loading,
        title: '查看下架单',
        wrapClassName: 'vertical-center-modal',
        newKey : shelfDown.newKey,
        onCancel () {
            dispatch({
                type: 'shelfDown/hideViewModal',
            })
        },
   }


   const detailModalProps = {
    item: shelfDown.viewItem,
    visible: shelfDown.showDetailModalVisible,
    maskClosable: false,
    viewDetailList:shelfDown.viewDetailList,
    confirmLoading: loading,
    title: '确认下架',
    wrapClassName: 'vertical-center-modal',
    newKey : shelfDown.newKey,
    onOk (data) {
        dispatch({
            type: `shelfDown/doPullOff`,
            payload: data,
        })
    },
    onCancel () {
        dispatch({
            type: 'shelfDown/upState',
            payload: {
                showDetailModalVisible:false,
              },
        })
    },
 }
    const loopRoom = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
         <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                    <FormItem>
                            {
                            getFieldDecorator('roomId')(
                             <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                              <Option value="">全部</Option>
                              {loopRoom(shelfDown.roomList)}

                              </Select>
                            )
                         }
                    </FormItem>
                    <FormItem>
                            {getFieldDecorator('userName',{initialValue:''})(
                                <Input type="text" placeholder="操作人" style={{ width:'130px' }} />
                            )}
                    </FormItem>
                    <FormItem>
                           {getFieldDecorator('executeTime')(
                                <RangePicker   style={{ width:'250px' }}  format="YYYY-MM-DD" />
                            )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('status')(
                            <Select
                                showSearch
                                style={{ width: 130 }}
                                placeholder="选择状态"
                                optionFilterProp="children"
                        >
                              <Option value="">全部</Option>
                              <Option value="1">未完成</Option>
                              <Option value="2">处理中</Option>  
                              <Option value="3">已完成</Option>
                            </Select>
                        )}
                    </FormItem>
                    <FormItem>
                        <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                    </FormItem>

                    <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
                        <FormItem>
                            <Button type="primary" size='large' onClick={addHandler}>新增下架单</Button>
                        </FormItem>
                    </div>
                </Form>
            </div>

            <div style={{width:'100%',padding:"20px 20px",}}>
                <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={shelfDown.list} pagination={pagination}
                />
            </div>
            </div>

            <AddShelfDownModal {...modalProps} />
            <ShelfDownViewModal {...viewModalProps} />
            <ShowShelfDownDetailModal {...detailModalProps} />
            <SecondShelfDownModal {...secondShelfDownModalProps} />
        </div>
    );
}

function mapStateToProps(state) {
  return { shelfDown : state.shelfDown,loading:state.loading.models.shelfDown};
}

ShelfDown = Form.create()(ShelfDown);

export default connect(mapStateToProps)(ShelfDown);
